{extend name="index_layout"/}
{block name="main"}
<div class="layui-card">
    <div class="layui-card-header">出库管理</div>
    <div class="layui-card-body">
        <div style="margin-bottom: 15px;width: 350px;display: flex;align-items: center">
            <label for="" style="width: 120px;margin-right: 10px">扫码枪出库:</label>
            <input type="text" id="barcodeInput" class="layui-input">
        </div>
        <div class="layui-form">
            <table class="layui-hide" id="currentTable" lay-filter="currentTable"
                   data-auth-add="{:$auth->check('qutbound/add')}"
                   data-auth-edit="{:$auth->check('qutbound/edit')}"
                   data-auth-delete="{:$auth->check('qutbound/del')}"
                   data-auth-recyclebin="{:$auth->check('qutbound/recyclebin')}"
            ></table>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
</script>
<script type="text/javascript">

    document.addEventListener('DOMContentLoaded', function() {
        // 获取input元素
        var barcodeInput = document.getElementById('barcodeInput');
        // 将焦点设置到input元素上
        barcodeInput.focus();
    });

    layui.use('yznTable', function () {

        var table = layui.yznTable;

        var init = {
            table_elem: '#currentTable',
            table_render_id: 'currentTable',
            add_url: '{:url("add")}',
            edit_url: '{:url("edit")}',
            delete_url: '{:url("del")}',
            modify_url: "{:url('multi')}",
            recyclebin_url: "{:url('recyclebin')}",
        };

        $(document).ready(function() {
            var delayTimer;

            $('#barcodeInput').on('input', function() {
                var barcode = $(this).val(); // 获取输入框的值

                clearTimeout(delayTimer); // 清除之前的定时器

                delayTimer = setTimeout(function() {
                    if (barcode) {
                        requestGoodsInfo(barcode); // 调用函数发送请求
                    }
                }, 300); // 设置延迟时间，单位毫秒（这里设置为300毫秒）
            });
        });


        function requestGoodsInfo(barcode) {
            layer.load(2); // 显示加载动画

            $.ajax({
                url: '/admin/Qutbound/getGoods?barcode=' + barcode,
                type: "GET",
                data: {name: "John", age: 30},
                dataType: "json",
                contentType: "application/json",
                headers: {"X-Auth-Token": "abcdef123456"},
                timeout: 5000,
                async: true,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                },
                complete: function (xhr, status) {
                    layer.closeAll(); // 关闭加载动画
                    console.log("请求完成");
                },
                success: function (response) {
                    if (response.code == 200) {
                        notice.success({message: response.msg});
                        location.reload();
                    } else {
                        notice.error({message: response.msg});
                    }
                },
                error: function (xhr, status, error) {
                    console.log("请求失败：" + error);
                }
            });
        }


        table.render({
            init: init,
            toolbar: ['refresh', 'delete'],
            url: '{:url("index")}',
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: 'ID', minWidth: 80, search: false},
                    {field: 'number', align: 'center', title: '商品编码', searchOp: 'LIKE', minWidth: 150},
                    {field: 'goods_name', align: 'center', title: '商品名称', searchOp: 'LIKE', minWidth: 110},
                    {field: 'nums', align: 'center', title: '商品出库数量', minWidth: 120, search: false},
                    {
                        field: 'cost_price',
                        align: 'center',
                        title: '成本单价',
                        minWidth: 100,
                        searchTip: '成本总价',
                        search: false
                    },

                    {
                        field: 'cost_price_total',
                        title: '成本总价',
                        align: 'center',
                        minWidth: 100,
                        searchTip: '成本总价'
                        , search: false
                    },
                    {
                        field: 'qutbound_price',
                        title: '出库单价',
                        minWidth: 100,
                        align: 'center',
                        searchTip: '出库总价'
                        , search: false
                    },
                    {
                        field: 'qutbound_price_total',
                        title: '出库总价',
                        minWidth: 100,
                        align: 'center',
                        searchTip: '出库总价'
                        , search: false
                    },
                    {
                        field: 'income',
                        align: 'center',
                        title: '利润',
                        minWidth: 80,
                        searchTip: '利润'
                        , search: false
                    },
                    {
                        field: 'create_time',
                        title: '创建时间',
                        minWidth: 80,
                        align: 'center',
                        width: 180,
                        search: 'range',
                        templet: yznTable.formatter.datetime
                    },
                    {
                        field: 'update_time',
                        title: '更新时间',
                        minWidth: 80,
                        align: 'center',
                        width: 180,
                        search: 'range',
                        templet: yznTable.formatter.datetime
                    },

                ]
            ],
            page: {}
        });

        yznTable.bindevent();
    });
</script>
{/block}